@import "../../../../styles/layout.module.scss";
@import "../../../../styles/common.module.scss";

.divVmInspectorWrapper {
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 20px;

    background-color: var(--vm-inspector-bkg-color);

    display: flex;
    flex-direction: column;
    gap: 20px;

    overflow-y: auto;
    @include thick-scroll-bar;

    font-family: sans-serif;
}

.divVmInspectorWrapperBoxShadow {
    box-shadow: var(--vm-console-inspector-box-shadow-color) 0 6px 6px -6px inset;
}

@mixin inspector-card {
    padding: 15px 20px;
    border: 1px solid var(--vm-inspector-card-border-color);
    border-radius: 8px;
    background-color: var(--vm-inspector-card-bkg-color);
}

.divStepStateCard {
    @include inspector-card;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.divStepStateWrapper {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.lblStepStateLabel {
    font-size: 20px;
    color: var(--vm-inspector-step-state-label-color);
    white-space: pre;
    user-select: none;
}

.divStepCount {
    font-size: 20px;
    font-weight: bold;
    color: var(--vm-inspector-step-count-color);
}

.divStateBase {
    font-size: 20px;
    font-weight: bold;
}

.divStateInitial {
    @extend .divStateBase;
    color: var(--vm-inspector-state-initial-color);
}

.divStateBusy {
    @extend .divStateBase;
    color: var(--vm-inspector-state-busy-color);
}

.divStateWaitInput {
    @extend .divStateBase;
    color: var(--vm-inspector-state-wait-input-color);
}

.divStateFree {
    @extend .divStateBase;
    color: var(--vm-inspector-state-free-color);
}

.divStateStaticCheckFailed {
    @extend .divStateBase;
    color: var(--vm-inspector-state-static-check-failed-color);
}

.divStateRuntimeError {
    @extend .divStateBase;
    color: var(--vm-inspector-state-runtime-error-color);
}

.divStateMaxStepReached {
    @extend .divStateBase;
    color: var(--vm-inspector-state-max-step-reached-color);
}

.divStateExitedNormally {
    @extend .divStateBase;
    color: var(--vm-inspector-state-exited-normally-color);
}

.divStateExitedAbnormally {
    @extend .divStateBase;
    color: var(--vm-inspector-state-exited-abnormally-color);
}

.divOptionsCard {
    @include inspector-card;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    color: var(--vm-inspector-text-color);
}

.divOptionWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.lblOption {
    font-size: 14px;
    user-select: none;
}

.iconOptionInfo {
    margin-left: 5px;
    color: var(--vm-inspector-option-info-icon-color);
    cursor: pointer;

    transition-duration: 200ms;

    &:hover {
        color: var(--vm-inspector-option-info-icon-hover-color);
    }
}

.inOptionValue {
    width: 110px;
}

.divMemoryUsageCard {
    @include inspector-card;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-left: 15px;
    padding-right: 15px;
    gap: 20px;
    color: var(--vm-inspector-text-color);
    padding-top: 8px;
}

.divGlobalVariableTableCard {
    @include inspector-card;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: var(--vm-inspector-text-color);

    > label[class="title"] {
        font-weight: bold;
        user-select: none;
    }
}

.divLocalVariableTableCard {
    @include inspector-card;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: var(--vm-inspector-text-color);

    > label[class="title"] {
        font-weight: bold;
        user-select: none;
    }

    > div[class="emptyHolder"] {
        font-size: 15px;
        user-select: none;
    }
}

.divLocalVariableTableWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.divLocalVariableTable {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    > div[class="titleWrapper"] {
        align-self: flex-start;

        > label[class="functionName"] {
            font-size: 14px;
            font-weight: bold;
            margin-left: 0.6em;
        }

        > label[class="callStackDepth"] {
            margin-left: 0.6em;
            font-size: 14px;
        }
    }
}

.paginationLocalVariableTable {
    user-select: none;
}
